﻿<html>
<head>
<title>JSFlow Animation Demo page</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="../html/html.js"></script>
<script type="text/javascript" src="jsflow.js"></script>
<script type="text/javascript">

function $(id){return document.getElementById(id);}

function log(msg){$("out").innerHTML+=msg+"<br>";}

function move(x, y){
	x = x?x:0; y = y?y:0;
	var pos0 = pos();
	return pos({x:pos0.x+=x, y:pos0.y+=y});
}

function pos(v){
	var oo = $("square");
	if(v){
		oo.style.left = v.x+"px";
		oo.style.top = v.y+"px";
	}
	return {
		x: oo.style.left?parseInt(oo.style.left):0,
		y: oo.style.top?parseInt(oo.style.top):0
	};
}

function startMovingProcess1(){with(JSFlow){
	var delay = 5;
	pos({x:100, y:100});
	
	sequence(
		function(){
			var go = new Continuation();
			(function loop(){
				move(2,0);
				wait(delay).run(pos().x<200?loop:go);
			})();
		},
		function(){
			var go = new Continuation();
			(function loop(){
				move(0,2);
				wait(delay).run(pos().y<200?loop:go);
			})();
		}
	).run();
	
}}	

function startMovingProcess2(){with(JSFlow){
	var delay = 5;
	pos({x:100, y:100});
	
	function xMoving(x, go){
		return function loop(){
			move(2, 0);
			JSFlow.wait(delay).run(pos().x<x? loop:go);
		};
	}
	
	function yMoving(y, go){
		return function loop(){
			move(0, 2);
			JSFlow.wait(delay).run(pos().y<y? loop:go);
		};
	}
	
	function blinking(count, go){
		var i = count;
		return function loop(){
			$("square").style.backgroundColor = i==1?"#ff0000":i%2?"#00ff00":"#ff0000";
			i--;
			JSFlow.wait(300).run(i>0?loop:go);
		};
	}
	
	sequence(
		function(){xMoving(200, new Continuation())();},
		function(){yMoving(200, new Continuation())();},
		function(){xMoving(250, new Continuation())();},
		function(){blinking(10, new Continuation())();},
		function(){yMoving(300, new Continuation())();},
		function(){xMoving(280, new Continuation())();},
		function(){blinking(6, new Continuation())();},
		function(){xMoving(290, new Continuation())();},
		function(){yMoving(310, new Continuation())();}
	).run();
	
}}	

function startSimpleMoving1(){
	pos({x:100, y:100});
	(function mv(){
		move(2,0);
		if(pos().x<200) setTimeout(mv, 5);
	})();
	
	(function mv(){
		move(0,2);
		if(pos().y<200) setTimeout(mv, 5);
	})();
	
}

function startSimpleMoving2(){
	pos({x:100, y:100});
	(function mv(){
		move(2,0);
		if(pos().x<200) setTimeout(mv, 5);
		else (function mv(){
			move(0,2);
			if(pos().y<200) setTimeout(mv, 5);
		})();
	})();
}

function usingTimes(){with(JSFlow){
	var delay = 5;
	pos({x:100, y:100});
	
	sequence(
		// Цикл с использованием примитива times
		// Позволяет описывать действие на каждой итерации 
		// как функцию от номера итерации
		// аргументы: число итераций, интервал ожидания между итерациями, функция - обработчик итерации
		times(100, delay, function(i){move(2, 0);}),
		times(100, delay, function(i){
			if(i%20>9) move(0, 2);
			else move(2, 0);
		}),
		times(100, delay, function(i){move(0, 2);})
	).run();

}}

</script>
</head>
<body>
	<h1>JSFlow Animation Demo page</h1>
	
	<div id="out"></div>
	<div>
		<button onclick="startMovingProcess1()">Start Moving Process 1</button>
		<button onclick="startMovingProcess2()">Start Moving Process 2</button>
		<button onclick="startSimpleMoving1()">Start Simple Moving 1</button>
		<button onclick="startSimpleMoving2()">Start Simple Moving 2</button>
		<button onclick="usingTimes()">Using "times" primitive</button>
	</div>
	<p>NB! Moving Process работает правильно - сначала горизонтальное перемещение, а потом ветикальное.
	Второй вариант процесса представлен более структурированно (определены специфические анимационные примитивы), что позволяет наглядно описывать сложную анимацию.</p>
	<p>Первая попытка анимации простыми средствами неудачна - перемещение по горизонтали и по вертикали идут одновременно.</p>
	<p>Вторая попытка анимации простыми средствами приводит к образованию вложенных структур, что существенно усложняет код, т.к. глубина вложенности равна числу этапов анимации.</p>
	<p>Под IE 6.0 простые реализации вообще почему-то не работают.</p>
	<p>Вариант с использованием примитива "times" позволяет легко определить действие на каждой итерации цикла как функцию от номера итерации.</p>
	<div id="square" style="position:absolute;left:100px;top:100px; width:10px; height:10px; background-color:red;"></div>
</body>
</html>